<template>
    <h3>开关控制</h3>
    <div class="switch-grid" :data-theme="theme">
        <span>
            <el-switch
                v-model="brakeOnOff"
                size="large"
                active-text="合闸"
                inactive-text="分闸"
            />
        </span>
        <span>
            <el-switch
                v-model="lockOnOff"
                size="large"
                active-text="锁扣"
                inactive-text="解锁"
            />
        </span>
        <span>
            <el-switch
                v-model="autoOnOff"
                size="large"
                active-text="自动控制"
                inactive-text="手动控制"
            />
        </span>
        <span>
            <el-switch
                v-model="prepaymentOnOff"
                size="large"
                active-text="预付费开"
                inactive-text="预付费关"
                @change="toggleTheme"
            />
        </span>
    </div>
</template>

<script setup lang="ts">
import {computed, ref} from 'vue'
//命名规则：true为前者，false为后者，OnOff的话，On为前者true，Off为后者false
const brakeOnOff = ref(true)
const lockOnOff = ref(false)
const autoOnOff = ref(false)
const prepaymentOnOff = ref(false)
//根据 prepaymentOnOff 切换主题
const theme = computed(() => (prepaymentOnOff.value ? 'dark' : 'light'));
const toggleTheme = () => {
    document.documentElement.setAttribute('data-theme', theme.value);
};

</script>

<style scoped>
.switch-grid {
    width: 90%;
    display: grid;
    /*2列 等宽*/
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    background-color: var(--background-color);
    color: var(--text-color);
}
:root {
  --background-color: #ffffff;
  --text-color: #333333;
}

[data-theme='dark'] {
  --background-color: #2c3e50;
  --text-color: #ecf0f1;
}

[data-theme='light'] {
  --background-color: #ffffff;
  --text-color: #333333;
}

</style>